import React, { useEffect } from 'react'
import { Modal, Form, Input } from 'antd'

function EditForm({
    modalVisible,
    modalOk,
    modalCancel,
    isEdit,
    modalData,
    isRepeat
}) {
    const [form] = Form.useForm()
    useEffect(() => {
        form.setFieldsValue(modalData)
    }, [form, modalData])
    return (
        <>
            <Modal
                getContainer={false}
                title={isEdit ? '修改班级数据' : '添加班级数据'}
                visible={modalVisible}
                onOk={() => {
                    form.validateFields()
                        .then((values) => {
                            form.resetFields()
                            modalOk(
                                {
                                    type: 'C',
                                    ...values
                                },
                                modalData
                            )
                        })
                        .catch((info) => {
                            console.log('Validate Failed:', info)
                        })
                }}
                okText={isEdit ? '修改' : '添加'}
                onCancel={modalCancel}
                cancelText="取消"
            >
                <Form
                    form={form}
                    layout="vertical"
                    name="form_in_modal"
                    initialValues={modalData}
                >
                    <Form.Item
                        name="no"
                        label="班级编号"
                        rules={[
                            {
                                required: true,
                                message: '请输入班级编号'
                            },
                            () => ({
                                validator(rule, value) {
                                    if (!isEdit && isRepeat(value)) {
                                        return Promise.reject('班级编号已存在')
                                    }
                                    if (
                                        isEdit &&
                                        value !== modalData.no &&
                                        isRepeat(value)
                                    ) {
                                        return Promise.reject('班级编号已存在')
                                    }
                                    return Promise.resolve()
                                }
                            })
                        ]}
                    >
                        <Input disabled={isEdit} />
                    </Form.Item>
                    <Form.Item
                        name="name"
                        label="班级名称"
                        rules={[
                            {
                                required: true,
                                message: '请输入班级名称'
                            }
                        ]}
                    >
                        <Input />
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
}

export default EditForm
